<template>
  <el-card class="user-container">
    <template #header>
      <div class="header">
        <span>{{ $t('msg.profile.introduce') }}</span>
      </div>
    </template>
    <div class="user-profile">
      <div class="box-center">
        <PanThumb
          :image="$store.getters.userInfo.avatar"
          :height="'100px'"
          :width="'100px'"
          :hoverable="true"
        >
          <div>HELLO</div>
          {{ $store.getters.userInfo.title }}
        </PanThumb>
      </div>
      <div class="box-center">
        <div class="user-name text-center">
          {{ $store.getters.userInfo.username }}
        </div>
        <div class="user-role text-center text-muted">
          {{ $store.getters.userInfo.title }}
        </div>
      </div>
    </div>

    <div class="project-bio">
      <div class="peoject-bio-section">
        <div class="project-bio-section-header">
          <svg-icon icon="introduce"></svg-icon>
          <span>{{ $t('msg.profile.projectIntroduction') }}</span>
        </div>
        <div class="project-bio-section-body">
          <div class="text-muted">
            {{ $t('msg.profile.muted') }}
          </div>
        </div>
      </div>
    </div>

    <div class="project-bio-section-header">
      <div class="project-bio-section-header">
        <svg-icon icon="reward"
          ><span>{{ $t('msg.profile.projectFunction') }}</span></svg-icon
        >
      </div>
      <div class="project-bio-section-body">
        <div class="progress-item" v-for="item in feat" :key="item.id">
          <div>{{ item.title }}</div>
          <el-progress
            :percentage="item.percentage"
            status="success"
          ></el-progress>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import PanThumb from '@/components/PanThumb/index.vue'
import { defineProps } from 'vue'
defineProps({ features: { type: Array, required: true } })

const feat = [
  {
    title: 'Vue3 + 全家桶',
    percentage: 100,
    content:
      '项目基于最新的<a target="_blank" href="https://v3.cn.vuejs.org/guide/introduction.html">vue3</a>全家桶进行开发，全面使用最新的的<a target="_blank" href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md">RFC script setup</a>语法标准，为你带来不一样的 vue3 开发体验',
    id: 1
  },
  {
    title: 'Element-Plus',
    percentage: 100,
    content:
      '<a target="_blank" href="https://element-plus.org/#/zh-CN">Element Plus</a>，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。是 Element UI 的官方 vue 3 兼容版本',
    id: 2
  },
  {
    title: 'vue-element-admin',
    percentage: 100,
    content:
      '<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/guide/">vue-element-admin</a> 是一个后台前端解决方案，它基于 vue 和 element-ui实现，并有用 70K 的 <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin">star</a>。<br />本项目使用最新 vue 技术对其进行了重构，并在其现有功能上进行了扩展，致力于为大家带来更加符合 <b>现代后台开发的前端技术解决方案</b>',
    id: 3
  },
  {
    title: 'ESLint + Git Hooks',
    percentage: 100,
    content:
      'ESLint 对应编码规范，Git Hooks 对应 Git 规范。<br /> 想要开发出大厂标准的企业级项目，需要先从规范做起！',
    id: 4
  },
  {
    title: '架构设计',
    percentage: 100,
    content:
      '阿里前端 P7 岗被称为 《技术专家》，也有人喜欢叫他们为 “前端架构师”，既然被称为 “架构师” ，那么架构设计当然是不可缺少的一环咯',
    id: 5
  },
  {
    title: '权限验证（页面权限、功能权限、动态权限、权限配置）',
    percentage: 100,
    content:
      '全面的后台权限验证系统，实现了 <b>页面权限、功能权限、动态权限、权限配置</b> 等全方位的权限功能',
    id: 6
  },
  {
    title: '功能引导',
    percentage: 100,
    content: '对用户的功能引导',
    id: 7
  },
  {
    title: '可配置 + 收缩侧边栏',
    percentage: 100,
    content: '根据路由动态生成的 Menu 菜单，实现真正的 <b>配置 Menu</b>',
    id: 8
  },
  {
    title: '动态面包屑',
    percentage: 100,
    content: '动态生成的面包屑数据',
    id: 9
  },
  {
    title: 'Tags View',
    percentage: 100,
    content: '便签快捷导航功能',
    id: 10
  },
  {
    title: 'svg sprite 图标',
    percentage: 100,
    content: '自定义的 svg Icon 配合 el Icon 自动分配导入',
    id: 11
  },
  {
    title: '国际化',
    percentage: 100,
    content: '多语言的国际化功能实现',
    id: 12
  },
  {
    title: '动态换肤',
    percentage: 100,
    content: '主题更换功能，提供缓存实现',
    id: 13
  },
  {
    title: '页面搜索',
    percentage: 100,
    content: '根据路由配置自动化生成的页面搜索数据，无需手动配置',
    id: 14
  },
  {
    title: 'excel 导出、导入',
    percentage: 100,
    content: 'excel 表格的导入、导出实现',
    id: 15
  },
  {
    title: 'zip 导入',
    percentage: 100,
    content: '页面数据导出为 zip ',
    id: 16
  },
  {
    title: '富文本 + MarkDown 编辑器',
    percentage: 100,
    content: '常用的编辑器功能，包含 富文本编辑器 && MarkDown 编辑器',
    id: 17
  },
  {
    title: '动态表格 + 拖拽表格 + 内联编辑表格',
    percentage: 100,
    content:
      '表格列表的常见操作，多用于包含表格项的展示功能中。包括：动态表格 && 拖拽表格 && 内联编辑表格 ',
    id: 18
  },
  {
    title: '统一错误处理',
    percentage: 100,
    content:
      '页面级的错误处理由 vue-router 统一处理。包含 401 和 404 的错误处理',
    id: 19
  },
  {
    title: '发布',
    percentage: 100,
    content: '构建与发布',
    id: 20
  },
  {
    title: '其他',
    percentage: 100,
    content:
      '除了以上功能之外，我们还实现了很多其他的功能，比如：CDN、动态的环境变量配置、懒加载、跨域等等',
    id: 21
  }
]
</script>

<style lang="scss" scoped>
.user-container {
  .text-muted {
    font-size: 14px;
    color: #777;
  }

  .user-profile {
    text-align: center;
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
    }
  }

  .project-bio {
    margin-top: 20px;
    color: #606266;
    span {
      padding-left: 4px;
    }

    .project-bio-section {
      margin-bottom: 36px;
      .project-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
      .project-bio-section-body {
        .progress-item {
          margin-top: 10px;
          div {
            font-size: 14px;
            margin-bottom: 2px;
          }
        }
      }
    }
  }
}
</style>
